<!--<script>-->

<!--export default {-->
<!--    data() {-->
<!--        return {-->
<!--            username : '',-->
<!--            password: ''-->
<!--        }-->
<!--    },-->
<!--    methods: {-->
<!--        submit() {-->
<!--            const user = {-->
<!--                username : this.username,-->
<!--                password: this.password-->
<!--            }-->
<!--            sessionStorage.setItem("login", JSON.stringify(user))-->
<!--            this.$store.commit({-->
<!--                type: 'setLogin',-->
<!--                user: user-->
<!--            })-->
<!--        }-->
<!--    }-->
<!--}-->
<!--</script>-->
<script setup>
import {ref} from "vue";
import {useRoute, useRouter} from 'vue-router'
import {useStore} from 'vuex'

const router = useRouter() // 获取到 路由实例 和 选项式API 中的 this.$router 作用一样
const route = useRoute()  // 可以获取路由跳转的参数 params  this.$route
const store = useStore() // 可以获取 vuex实例 this.$store

const username = ref('')
const password = ref('')

function submit() {
    console.log(username)
    console.log(password)
    const user = {
        username: username.value,
        password: password.value,
        nickName: '张三'
    }
    store.commit('setLogin', {
        user: user
    })
    sessionStorage.setItem('login', JSON.stringify(user))
    router.push('/index') // <router-link>
}
</script>
<template>
    <h2>登录</h2>
    <input v-model="username"/> <br/>
    <input v-model="password"/> <br/>
    <el-button @click="submit">登录</el-button>
</template>

<style scoped>

</style>